<template>
	<view class="">
		<u-navbar title="申请售后"  placeholder autoBack></u-navbar>
		<view class="p-2 position-relative">
			<view class="bg-white px-2 pb-2 brStyle">
				<view class="pt-2" v-for="(item,index) in detail.goods_order" :key="index">
					<orderItem :item="item" type="order" @click=""></orderItem>
				</view>
			</view>
			<!-- 选择方式 -->
			<view class="bg-white flex align-center justify-between px-2 border-bottom mt-2 brStyle" style="height: 104rpx;"
				@click="statusShow = true">
				<view class="font-30 text-main">申请类型</view>
				<view class="flex align-center">
					<view class="font-30 text-light6">{{statusName?statusName:'请选择'}}</view>
					<view class="ml-1">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<!-- 退款原因 -->
			<view class="p-3 bg-white brStyle mt-2">
				<view class="">
					<text class="font-weight-bold">退款原因</text><text style="color: #b4b4b4;">（必选）</text>
				</view>
				<u-radio-group
				    v-model="resonValue"
				    placement="column"
					activeColor="#fa3830"
				  >
				    <u-radio
					  class="mt-2"
				      :customStyle="{marginBottom: '8px'}"
				      v-for="(item, index) in resonList"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
					  @change="groupChange(item,index)"
					  label-color="#929292"
				    >
				    </u-radio>
				  </u-radio-group>
			</view>
			<!-- 退款方式及金额 -->
			<view class="bg-white brStyle p-2 mt-2 font-28">
				<view class="flex justify-between border-bottom pb-2">
					<view class="" style="color: #8c8c8c;">退款方式</view>
					<view style="color: #f1403a;">原路退回(1-7个工作日内到账，0手续费)</view>
				</view>
				<view class="flex justify-between mt-2">
					<view class="" style="color: #8c8c8c;">退款金额：</view>
					<view >￥{{detail.pay_price}}</view>
				</view>
			</view>
			<!-- 退款说明 -->
			<view class="mt-2 bg-white p-2">
				<view class="font-30 text-main">退款说明</view>
				<view class="mt-2">
					<u-textarea placeholderClass="font-24" v-model="comment" border="none" placeholder="请描述您退款原因" autoHeight style="background-color: #f6f6f6;"></u-textarea>
				</view>
			
				<view class="mt-2">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9">
						<u-image src="/static/user/addpic1.png" width="156rpx" height="156rpx"></u-image>
					</u-upload>
				</view>
			</view>
			<view class="" style="height: 150rpx"></view>
			<commonButton title="提交" background="#85b885" @click="submit"></commonButton>
		</view>
		
        

		<!-- 选择弹框 -->
		<u-popup :show="statusShow" closeable @close="statusShow = false">
			<view class="bg-white" style="height: 400rpx;">
				<view class="flex align-center justify-center font-30 font-weight-bold mt-2">退货状态</view>
				<view class="p-2 mt-5" v-for="(item,index) in statusList" :key="index">
					<view class="flex align-center" @click="change(item,index)">
						<view class="font-30">{{item}}</view>
						<view class="ml-auto">
							<u-image :src="statusIndex===index?'/static/select.png':'/static/noselect.png'" width="15"
								height="15">
							</u-image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		base
	} from '@/request/env.js'
	export default{
		data(){  
			return{
				statusList: ['退款','退款退货'], 
				statusName: '退款', // 默认选择方式
				statusShow: false, // 选择方式弹框
				resonList: [
					{
						name: '不喜欢',
						disabled: false
					},
					{
						name: '选错规格,重新拍',
						disabled: false
					},
					{
						name: '少件/漏发',
						disabled: false
					},
					{
						name: '包装/商品破损/污渍/变形',
						disabled: false
					},
					{
						name: '其他原因,不想要了',
						disabled: false
					},
				], // 退款原因
				resonValue: '', // 选中的退款原因
				fileList1: [],
				comment: '' ,// 退款说明
				status: 'add',
				resonIndex: 0,
				images:[],
				refundId:'0',
				statusIndex: 0
			}
			
		},
		computed: {
			...mapState({
				detail: state => state.order.orderDetial
			})
		},
		onLoad() {
		},
		methods:{
			// 选择申请类型
			change(item, index) {
				this.statusIndex = index
				this.statusShow = false
				this.statusName = item
			},
			groupChange(n, index) {
			  this.reson = n
			  this.resonIndex = index
			},
			submit() {
			    if(uni.$u.test.isEmpty(this.comment)){
					return uni.showToast({
						title: '请填写退货说明',
						icon:'none'
					});
				}
			
				this.fileList1.forEach(item=>{
					this.images.push(item.url)
				})
				console.log(this.fileList)
				console.log(this.images)
				let parmar = {
					order_goods_id:this.detail.goods_order[0].id,
					order_id:this.status==='add'?this.detail.id:this.detail.order_id,
					type:this.statusName === '退款'?1:2,
					goods_status:this.statusIndex+1,
					refund_reason:this.resonIndex+1,
					money:this.detail.goods_order[0].total_price,
					reason:this.comment,
					images:this.images.join(','),
					refund_id:this.refundId
				}
			
				this.$api.addservice(parmar).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title: '申请成功',
							icon:'success'
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},1000)
					}
				})
			
			},
			// 测试
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
				    uni.uploadFile({
				        url: base + "/api/index/uploadData",
						method: "POST",
				        filePath: url,
				        name: "file",
				        formData: {
				            user: 'test',
							token:uni.getStorageSync('token')
				        },
				        success: (res) => {
				          //setTimeout(() => {
				          let data = JSON.parse(res.data)
				          console.log(data)
				          resolve(data.data.url)
				        },
				    })
				})
			},
		}
	}
</script>

<style scoped>
	.brStyle {
		border-radius: 16rpx;
	}
</style>